<template>
  <div class="app-container">
    <div>
      <el-form ref="queryForm"   label-width="75px">
        <el-row >
          <el-col :span="24">

            <el-input
              v-model="queryParams.value"
              :placeholder="tools.getDkeyValue(typeOptions,queryParams.type)"
              clearable
              size="small"
              style="width: 100%"
              @keyup.enter.native="submitFileForm"
            >
              <el-select
                v-model="queryParams.type"
                slot="prepend"
                style="width: 100px"
              >
                <el-option
                  v-for="dict in typeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-input>

          </el-col>
        </el-row>

        <el-row >
          <el-col :span="24">
            <el-button type="success" style="width: 100%;margin-top: 10px;"  @click="showApplyAdd">申 请 用 卡</el-button>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="24">
            <el-button type="primary" style="width: 100%;margin-top: 15px;" readonly="submitFileFormBtn" @click="submitFileForm">查 询 申 请 进 度</el-button>
          </el-col>
        </el-row>




        <el-row v-if="showApply"  style="margin-top: 20px;">
          <el-col :span="24">
            <el-form-item label="姓名:">
              <el-input v-model="form.u_name" placeholder="使用人真实姓名" />
            </el-form-item>
            <el-form-item label="身份证号:">
              <el-input v-model="form.id_number" placeholder="使用人身份证号" />
            </el-form-item>
            <el-form-item label="身份证地址:" v-if="!selBtn" >
              <el-input v-model="form.id_address" placeholder="使用人身份证地址" />
            </el-form-item>
            <el-form-item  label="电话:">
              <el-input v-model="form.telephone" placeholder="使用人电话" />
            </el-form-item>
            <el-form-item label="ICCID:">
              <el-input v-model="form.iccid" placeholder="ICCID 卡板号码" />
            </el-form-item>
            <el-form-item label="申请备注:">
              <el-input type="textarea" v-model="form.apply_remarks" placeholder="申请备注（选填）" />
            </el-form-item>
          </el-col>

          <el-form-item label="状态:" v-if="selBtn" >
            <el-input v-model="form.state" placeholder="状态" />
          </el-form-item>
          <el-form-item label="审核时间:" v-if="selBtn" >
            <el-input v-model="form.review_time" placeholder="审核时间" />
          </el-form-item>
          <el-form-item label="审核建议:" v-if="selBtn" >
            <el-input v-model="form.audit_suggestion" placeholder="审核建议" />
          </el-form-item>

        </el-row>
        <el-row v-if="addBtn" >
          <el-col :span="24">
            <el-button type="primary" style="width: 100%;margin-top: 15px;"  @click="sub">确 认 申 请</el-button>
          </el-col>
        </el-row>
        <el-row v-if="selBtn" >
          <el-col :span="24">
            <el-button type="primary" style="width: 100%;margin-top: 15px;"  @click="cardCopy">复 制 信 息</el-button>
          </el-col>
        </el-row>




      </el-form>
    </div>



  </div>
</template>

<script>
import tools from "@/utils/yunze/tools";
import {find,save} from "@/api/yunze/flowcard/applcard";


export default {
  name: "cardApply",
  data() {
    return {
      form:{
        u_name:'',
        id_number:'',
        id_address:'',
        telephone:'',
        iccid:'',
        apply_remarks:'',
        dept_id:window['IoTLink_AppltDeptId']!=null?window['IoTLink_AppltDeptId']:'100'
      },

      showApply:false,

      submitFileFormBtn:false,//确认按钮
      // 表单参数
      queryForm: {
        cardNo:'',
      },
      // 查询参数
      queryParams: {
        type: "id_number",
        value: null,
      },

      typeOptions:[
        {
          dictValue:"id_number",
          dictLabel:"身份证号",
        },
        {
          dictValue:"telephone",
          dictLabel:"使用人电话",
        },
        {
          dictValue:"a_no",
          dictLabel:"流水号",
        },
      ],
      addBtn:false,// 新增按钮
      selBtn:false,//查询按钮
      rFrom:[

      ],
      rFromShow:false,//返回正确 显示
      dListShow:false,//返回错误 显示
      dListStr:'',
      dList:[],//未找到卡号
      CopyText:'',//复制内容
      tools:tools,

    };
  },
  created() {
    let dept_id = this.$route.query.dept_id;
    if (dept_id != null && dept_id != '' && dept_id.length > 0) {
      window['IoTLink_AppltDeptId'] = dept_id;
    }


    this.$store.dispatch('LogOut').then(() => {
      console.log("LogOut");
    })
  },
  methods: {

    showApplyAdd(){
      this.showApply =true;
      this.addBtn =true;
      this.selBtn =false;

      this.form={
        u_name:'',
        id_number:'',
        id_address:'',
        telephone:'',
        iccid:'',
        apply_remarks:'',
        dept_id:window['IoTLink_AppltDeptId']!=null?window['IoTLink_AppltDeptId']:'100'
      };
    },

    sub(){
      this.addBtn=false;

      let _this = this;
      if (tools.VerificationsTextLength(_this, _this.form.u_name, "使用人姓名",2) == true &&
        tools.VerificationsTextLength(_this, _this.form.id_number, "身份证号",17) == true &&
        tools.VerificationsTextLength(_this, _this.form.id_address, "身份证地址",5) == true &&
        tools.VerificationsTextLength(_this, _this.form.telephone, "使用人电话",10) == true &&
        tools.VerificationsTextLength(_this, _this.form.iccid, "ICCID",14) == true
      ) {
        let Pwd_Str = tools.encrypt(JSON.stringify(this.form));
        save(Pwd_Str).then(response => {
          let jsonobj = JSON.parse(tools.Decrypt(response));
          //console.log(jsonobj);
          if (jsonobj.code == 200) {
            this.msgSuccess(jsonobj.msg);
            this.showApply = false;
            this.addBtn =false;
          } else {
            this.msgError(jsonobj.msg);
          }
        })
      }
      this.addBtn=true;
    },



    //提交
    submitFileForm() {
      this.showApply = false;
      this.selBtn =true;
      this.addBtn =false;
      let _this = this;
      this.CopyText = '';

      if (tools.VerificationsText(_this, _this.queryParams.type, "查询类型 不能为空！") == true &&
        tools.VerificationsText(_this, _this.queryParams.value, "查询值 不能为空！") == true
      ) {
        let map = {};
        map[_this.queryParams.type] = _this.queryParams.value;
        let Pwd_Str = tools.encrypt(JSON.stringify(map));
        find(Pwd_Str).then(response => {
          let jsonobj = JSON.parse(tools.Decrypt(response));
          //console.log(jsonobj);
          if (jsonobj.code == 200) {
            if(jsonobj.Data!=undefined && jsonobj.Data!=null && jsonobj.Data!=''){
              this.form = jsonobj.Data;
              this.showApply = true;

              let review_time = tools.Is_null(this.form.review_time)?this.form.review_time:"";
              let audit_suggestion = tools.Is_null(this.form.audit_suggestion)?this.form.audit_suggestion:"";

              let CopyText = '';
              CopyText +="姓名："+this.form.u_name+"\n";
              CopyText +="身份证："+this.form.id_number+"\n";
              CopyText +="电话："+this.form.telephone+"\n";
              CopyText +="ICCID："+this.form.iccid+"\n";
              CopyText +="申请备注："+this.form.apply_remarks+"\n";
              CopyText +="状态："+this.form.state+"\n";
              CopyText +="审核时间："+review_time+"\n";
              CopyText +="审核建议："+audit_suggestion+"\n";

              this.CopyText = CopyText;

            } else {
              this.msgError("未找到匹对数据");
            }


          } else {
            this.msgError(jsonobj.msg);
          }
        })


      }

    },

    cardCopy(){
      let _this = this;
      tools.copyThat(_this.CopyText,_this);
    },








  }
};
</script>

<style >
.el-divider--horizontal{
  margin: 10px 0;
}
.el-form-item {
  margin-bottom: 5px;
  line-height: 20px;
}

.el-form-item__label{
  font-size: 12px!important;
  padding: 0 6px 0 0!important;
}

</style>

